import React, { Component } from 'react';
import "../styles/Xingcheng.scss"
import * as service from "../api/index"
import { NavBar, Tabs } from 'antd-mobile'

class Xingcheng extends Component {
    constructor(props) {
        super(props);
        this.state = {
            wenda: [],
            tiwen: []
        };
    }

    async componentDidMount() {

        //热门问题
        var res1 = await service.gong_wenda()
        console.log(res1);
        this.setState({ wenda: res1.data.list })

        //热门问题
        var res2 = await service.xingcheng_tiwen()
        console.log(res2.data.list);
        this.setState({ tiwen: res2.data.list })
    }
    render() {
        return (
            <div className='Xingcheng'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}><h3>行程<span>🔍</span> </h3></NavBar>
                </div>
                <div className="xiamian">
                    <Tabs>
                        <Tabs.Tab title='热门问题' key='fruits'>
                            <div className="wenda">
                                {
                                    this.state.wenda.map((item, index) => {
                                        return (
                                            <div className="wenda_one" key={index}>
                                                <h3>{item.name}</h3>
                                                <div className="hhh">
                                                    <h4>{item.shuoming}</h4>
                                                    <span>{item.xingcheng}</span>
                                                    <div className="xia">
                                                        <p>{item.time}</p>
                                                        <p>{item.msg}</p>
                                                    </div>
                                                </div>

                                            </div>
                                        )
                                    })
                                }

                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='蔬菜' key='vegetables'>
                            <div className="tiwen">
                                {
                                    this.state.tiwen.map((item, index) => {
                                        return (
                                            <div className="tiwen_one" key={index}>
                                                <div className="left">
                                                    <img src={item.pic} alt="" />
                                                </div>
                                                <div className="right">
                                                    <h3>{item.shuoming}</h3>
                                                    <span className='xc'>{item.xingcheng}</span>
                                                    <div className="oone">
                                                        <p>{item.time}</p>
                                                        <span>{item.xing}</span>
                                                        <span>{item.msg}</span>
                                                    </div>
                                                </div>

                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Tabs.Tab>
                    </Tabs>
                </div>
            </div>
        );
    }
}

export default Xingcheng;